<template>
  <div class="w f-s m-t10 project-type">
    <div class="select-box" @click="selectProjectType(0)" :class="{'select-box-on':projectType==0}">
      <div class="image box-b" style="width:220px;height:120px">
        <img src="@/assets/project/tuxiangjiance.png" class="w" />
      </div>
      <div class="w t-c title">图像检测</div>
    </div>
    <div class="select-box" @click="selectProjectType(1)" :class="{'select-box-on':projectType==1}">
      <div class="image box-b" style="width:220px;height:120px">
        <img src="@/assets/project/tuxiangfenglei.png" class="w" />
      </div>
      <div class="w t-c title">图像分类</div>
    </div>
    <div class="select-box" @click="selectProjectType(2)" :class="{'select-box-on':projectType==2}">
      <div class="image box-b" style="width:220px;height:120px">
        <img src="@/assets/project/tuxiangqiege.png" class="w" />
      </div>
      <div class="w t-c title">图像分割</div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    modelValue: Number
  } as any,
  emits: ['update:modelValue'],
  data() {
    return {}
  },
  computed: {
    projectType: {
      get(): number {
        return this.modelValue
      },
      set(val: number) {
        this.$emit('update:modelValue', val)
      }
    }
  },
  methods: {
    selectProjectType(type: number) {
      console.log(type)
      debugger
      this.projectType = type
    }
  }
}
</script>

<style lang="scss" scoped>
.project-type {
  margin-bottom: 10px;
  .select-box {
    border: 1px solid #dadada;
    &:hover {
      border: 1px solid #221ef5;
    }
    margin-right: 8px;
    &:last-child {
      margin-right: 0px;
    }
  }
  .select-box-on {
    border: 1px solid #221ef5;
  }
  .title {
    padding: 4px;
    box-sizing: border-box;
  }
}
</style>